<!--团购-->
<template>
  <div class="Group">
    <div class="Group_head">
      <van-icon name="arrow-left" @click="back" />
      <h3>团购</h3>
      <p>
        <van-icon name="ellipsis" />
        <van-icon name="award-o" />
      </p>
    </div>
    <div class="Group_main">
      <dl v-for="(item, index) in data" :key="index">
        <dt><img :src="item.img" alt="" @click="btndetail(item)" /></dt>
        <dd>
          <p>{{ item.name }}</p>
          <p>{{ item.address }}</p>
          <p>
            <span>活动时间：{{ item.time }}</span>
            <span>已报名：{{ item.peopleNum }}人</span>
          </p>
          <p>
            <van-switch v-model="item.checked" size="24px" />
            <span>
              <button @click="btnstart">开团</button>
              <button @click="btndel(item.id)">删除</button>
            </span>
          </p>
        </dd>
      </dl>

      <span class="filex" @click="btnset">+</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      data: [],
      detail: [],
      checked: false,
    };
  },
  methods: {
    group() {
      axios
        .get("/teamBuy", {
          state: "开启",
        })
        .then((res) => {
          console.log(res);
          this.data = res.data;
        });
    },

    //删
    btndel(id) {
      axios.post('/deleteTeam',{
        id:id
      }).then(res => {
        console.log(res);
        this.group()
      })
    },
    //返回上一页
    back() {
      history.go(-1);
    },
    //详情
    btndetail(item) {
      this.$router.push({
        path: "/home/groupdetail",
        query: { item: JSON.stringify(item) },
      });
    },

    //开团
    btnstart() {
      this.$router.push("/home/startgroup");
    },

    //创建团购
    btnset() {
      this.$router.push("/home/setgroup");
    },
  },

  created() {
    this.group();
  },
};
</script>

<style>
.Group {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.Group_head {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  background: #2693fa;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 999;
}
.Group_head p {
  border: 1px solid #e6e6e6;
  border-radius: 40px;
}
.Group_head p .van-icon {
  padding: 4px 10px;
}
.Group_main {
  flex: 1;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.Group_main dl {
  width: 93%;
  height: 400px;
}
.Group_main dl dt {
  width: 100%;
  height: 250px;
}
.Group_main dl dt img {
  width: 100%;
  height: 100%;
}
.Group_main dl dd p {
  margin: 10px 0;
}
.Group_main dl dd p:nth-child(3) {
  display: flex;
  justify-content: space-between;
}
.Group_main dl dd p:nth-child(4) {
  display: flex;
  justify-content: space-between;
}
.Group_main dl dd p:nth-child(4) button:nth-child(1) {
  background: #2693fa;
  color: #fff;
  border: none;
  margin: 0 5px;
  border-radius: 5px;
  padding: 5px 10px;
}
.Group_main dl dd p:nth-child(4) button:nth-child(2) {
  background: #dbd7d7;
  color: rgb(129, 122, 122);
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
}
.filex {
  width: 80px;
  height: 80px;
  position: fixed;
  bottom: 50px;
  right: 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50px;
  text-align: center;
  line-height: 80px;
  color: turquoise;
  font-size: 40px;
}
</style>